<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '分享赚',
    navigationBarRightButton: {
      hide: true,
    },
  },
}
</route>
<template>
  <view
    class="w-full h-full bg-white overflow-hidden box-border"
    :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
  >
    <view class="w-full h-full home-container">
      <wd-navbar @click-left="handleClickLeft">
        <template #title>
          <text class="text-gray-333 font-size-36 font-500">分享赚</text>
        </template>
        <template #left>
          <wd-icon
            name="chevron-left"
            class="text-gray-333 font-size-44"
            @click="pagesBack"
          ></wd-icon>
        </template>
      </wd-navbar>
      <view class="w-full h-full p-x-28 p-y-32 home-content">
        <view class="w-full hr-184 pos-relative" @click="headleRule">
          <view class="w-full h-full pos-absolute pos-top-0 pos-left-0 z-0">
            <image width="100%" height="100%" src="../../static/images/background/share-bg.png" />
          </view>
          <view class="p-x-28 p-y-32 border-box pos-relative z-1">
            <view class="flex justify-start items-center">
              <view class="font-size-28 font-500 text-gray-333">获得天琴币</view>
              <view class="wr-28 hr-28 mg-l-8">
                <wd-img :width="'28rpx'" :height="'28rpx'" round :src="shareIcon" />
              </view>
            </view>
            <view class="font-size-56 text-gray-333 font-600 mg-t-14">
              <text>{{ shareInfo.bonus }}</text>
            </view>
          </view>
        </view>
        <view
          class="w-full hr-108 bg-#F7F7FB p-x-28 b-br-16 mg-t-32 flex justify-between items-center"
        >
          <view
            class="wr-295 flex justify-between items-center"
            v-for="(item, index) in menuList"
            :key="index"
            @click="handleMenu(index)"
          >
            <view class="flex justify-start items-center">
              <view class="wr-32 hr-30 flex justify-center items-center">
                <image width="100%" height="100%" :src="item.icon" />
              </view>
              <view class="font-size-28 font-400 text-gray-333 mg-l-14">{{ item.title }}</view>
            </view>
            <view class="flex jusitfy-center items-center font-size-28">
              <view class="font-400 text-gray-333">{{ item.number }}</view>
              <wd-icon name="chevron-right" custom-class="font-size-34"></wd-icon>
            </view>
          </view>
        </view>
        <view class="w-full hr-200 b-br-16 mg-t-32" @click="handleLedgers">
          <view class="w-full h-full flex justify-center items-center">
            <image width="100%" height="100%" :src="doingBg" />
          </view>
        </view>
        <view class="w-full hr-44 flex justify-center items-center mg-t-48">
          <view class="wr-210 hr-18 flex justify-center items-center">
            <image width="100%" height="100%" :src="titleBg" />
          </view>
          <view class="font-size-32 text-gray-333 font-500 mg-l-24 mg-r-24">相关推荐</view>
          <view class="wr-210 hr-18 transform-rotate-180 flex justify-center items-center">
            <image width="100%" height="100%" :src="titleBg" />
          </view>
        </view>
        <view class="w-full mg-t-18">
          <view
            class="w-full hr-144 flex justify-start b-br-16 p-x-24 p-y-24 pos-relative mg-b-32 box-shadow"
            v-for="(item, index) in lessonList"
            :key="index"
          >
            <view class="wr-136 hr-96">
              <image width="100%" height="100%" :src="item.image" />
            </view>
            <view class="mg-l-20">
              <view class="flex justify-start items-center">
                <view class="wr-76 hr-36 b-br-8 flex justify-center items-center box-linear-bg">
                  <text class="font-size-22 font-400 text-gray-333">{{ item.subName }}</text>
                </view>
                <view class="font-size-28 font-500 text-gray-333 mg-l-8">{{ item.name }}</view>
              </view>
              <view class="font-size-22 text-gray-999 mg-t-14">
                <text>分享最多可得</text>
                <text class="font-size-38 text-red-1 font-500">{{ item.price }}</text>
                <text>天琴币</text>
              </view>
            </view>
            <view class="wr-150 hr-48 pos-absolute pos-right-28 pos-bottom-28">
              <wd-button type="primary" size="small">
                <text class="font-size-22 font-400 text-white line-height-none">立即分享</text>
              </wd-button>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { shareGetMoney } from '@/service/my/my'

defineOptions({
  name: 'ShareMoney',
})
const { safeAreaInsets } = uni.getSystemInfoSync()
const handleClickLeft = () => {}
const pagesBack = () => {
  uni.switchTab({
    url: '/pages/home/person',
  })
}
const shareIcon = ref('../../static/images/icons/share-icon.png')
const menuList = ref([
  {
    icon: '../../static/images/icons/fans.png',
    title: '我的粉丝',
    number: 0,
  },
  {
    icon: '../../static/images/icons/promotion.png',
    title: '推广订单',
    number: 0,
  },
])
const doingBg = ref('../../static/images/background/share-doing-1.png')
const titleBg = ref('../../static/images/background/title-bg.png')
const lessonList = ref([
  {
    image: '../../static/images/background/image-1.png',
    name: '课程标题课程',
    subName: '课程',
    price: '1.59',
  },
  {
    image: '../../static/images/background/image-1.png',
    name: '课程标题课程',
    subName: '课程',
    price: '1.59',
  },
  {
    image: '../../static/images/background/image-1.png',
    name: '课程标题课程',
    subName: '课程',
    price: '1.59',
  },
])
const headleRule = () => {
  uni.navigateTo({
    url: '/pages/shared/shareRule',
  })
}
const handleMenu = (index: number) => {
  if (index === 1) {
    uni.navigateTo({
      url: '/pages/shared/shareOrder',
    })
  } else if (index === 0) {
    uni.navigateTo({
      url: '/pages/shared/shareFans',
    })
  }
}
const handleLedgers = () => {
  uni.navigateTo({
    url: '/pages/shared/shareLedger',
  })
}
const shareInfo: any = ref({
  bonus: 0,
})
onLoad(() => {})
onShow(() => {
  getData()
})
const getData = () => {
  shareGetMoney().then((res: any) => {
    if (res.data) {
      shareInfo.value.bonus = res.data.bonus
      menuList.value[0].number = res.data.fanCount
      menuList.value[1].number = res.data.orderCount
    }
  })
}
</script>

<style scoped lang="scss">
.home-container {
  position: relative;
  z-index: 1;
}
.home-content {
  height: calc(100% - var(--wot-navbar-height, 88rpx));
  overflow: auto;
}
.box-shadow {
  box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.06);
}
.box-linear-bg {
  background: linear-gradient(90deg, #ece7f6 0%, #dfdfff 100%);
}
::v-deep .wd-button {
  width: 100% !important;
  height: 100% !important;
}
::v-deep .wd-tabs__nav-item {
  height: 58rpx !important;
  font-size: 32rpx !important;
  line-height: 38rpx !important;
  color: #312f2a !important;
}
::v-deep .wd-tabs__nav {
  height: 58rpx !important;
}
</style>
